import { memo, useEffect, useRef, useState } from "react";

const CellItem = memo(
  ({
    row,
    col,
    computedFont,
    gridStyle,
    borderStyle,
    value,
    setInputValue,
  }) => {
    const [showInput, setShowInput] = useState(false);
    const inputRef = useRef();
    useEffect(() => {
      if (showInput) {
        inputRef.current.focus();
      }
    }, [showInput]);
    return (
      <div
        className={`cr cell-item`}
        style={{
          ...computedFont,
          ...gridStyle,
          ...borderStyle,
        }}
        onDoubleClick={() => {
          setShowInput(true);
        }}
        data-row={row}
        data-col={col}
      >
        <div
          className="text"
          style={{
            display: showInput ? "none" : "block",
          }}
          data-row={row}
          data-col={col}
        >
          {value}
        </div>
        <textarea
          ref={inputRef}
          style={{
            display: showInput ? "block" : "none",
            ...computedFont,
          }}
          value={value}
          onChange={(e) => setInputValue(e.target.value)}
          onBlur={() => setShowInput(false)}
        ></textarea>
      </div>
    );
  }
);

export default CellItem;
